<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>快速表单视图</title>
</head>
<body>
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
	    <div class="collapse navbar-collapse">
	    	<button type="button" class="btn btn-default navbar-btn" id="saveDateBt">尝试提交数据</button>
			<button type="button" class="btn btn-default navbar-btn" id="showCodeBt">源代码</button>
	    </div>
	  </div>
	</nav>
	<div class="container-fluid am-margin-top" id="formView">
		<form method="post">
			
		</form>
	</div>
	<div class="container-fluid am-margin-top" style="display:none;" id="codeView">
		<textarea></textarea>
	</div>
	<script type="text/javascript">
	$(function(){
		var id='${param.id}';
		var formBuilder;
		var saveDateBt=$("#saveDateBt").click(function(){
			var dates=formBuilder.submitDates();
		});
		
		var showCodeBt=$("#showCodeBt").click(function(){
			var _$formView=$("#formView");
			var _$codeView=$("#codeView");
			if(_$formView.is(":hidden ")){
				showCodeBt.html("表单");
				_$formView.show();
				_$codeView.hide();
				saveDateBt.show();
			}else{
				showCodeBt.html("源代码");
				_$formView.hide();
				_$codeView.show();
				saveDateBt.hide();
				requirejs(['jsBeautify/index',
				           'css!codemirror/lib/codemirror.css',
				           'codemirror/lib/codemirror',
				           'codemirror/mode/htmlembedded/htmlembedded'],function(
				        		   jsBeautify,
				        		   codemirrorCss,
				        		   CodeMirror,
				        		   htmlembeddedModel
				        		   ){
					var hText=$("#formView").html();
					hText=jsBeautify.html(hText);
					var myCodeMirror = CodeMirror.fromTextArea(_$codeView.find("textarea").get(0), {
						autoMatchParens: true,
						width: '100%',//设置宽度
			            textWrapping: true,
			            lineNumbers: true
					});
					
					myCodeMirror.setValue(hText);
				});
			}
		});
		
		require(['wiseMen/module/FormBuilder'],function(FormBuilder){
			formBuilder=new FormBuilder();
			formBuilder.initById(id);
    	});
		
	});
	</script>
</body>
</html>